<template>
  <div>
    <h1>动态路由例子</h1>
    <nav>
      <ul>
        <li>
          <router-link to="/user/123">User 123</router-link>
        </li>
        <li>
          <router-link to="/user/456">User 456</router-link>
        </li>
        <li>
          <router-link
              :to="'/post/' + posts[0].id + '/comment/' + posts[0].comments[0].id"
          >Comment {{ posts[0].comments[0].id }} on Post {{ posts[0].id }}
          </router-link
          >
        </li>
        <li>
          <router-link
              :to="'/post/' + posts[0].id + '/comment/' + posts[0].comments[1].id"
          >Comment {{ posts[0].comments[1].id }} on Post {{ posts[0].id }}
          </router-link
          >
        </li>
        <li>
          <router-link to="/non-existent-page">不存在页面</router-link>
        </li>
        <li>
          <router-link to="/user-john">匹配user开头的页面</router-link>
        </li>
        <li>
          <router-link to="/maind">动态路由创建的</router-link>
        </li>
      </ul>
    </nav>
    <router-view :posts="posts"></router-view>
  </div>
</template>

<script>
import PostComment from './views/PostComment.vue'

export default {
  name: 'App',
  components: {
    PostComment,
  },
  data() {
    return {
      posts: [
        {
          id: 789,
          comments: [
            {
              id: 101,
            },
            {
              id: 102,
            },
          ],
        },
      ],
    }
  },
}
</script>
